<template>
	<view class="goods-deatil">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(item,i) in goodsData.img_url" :key="i">
				<view class="swiper-item">
					<image :src="serverUrl+item" width="100vw" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="goods-info">
			<view class="price-info">
				<goods-price :types="goodsData.types" :active="active"></goods-price>
			</view>
			<view style="font-size: 18px">{{goodsData.name}}</view>
			<view class="materials">{{goodsData.materials}}(款式和尺寸均可定制，详情请咨询客服)</view>
		</view>
		<view class="goods-type">
			<view class="bg-card">
				<text class="bg-card-title">运费</text>部分区域免运费
			</view>
			<view style="margin-top:20rpx">
				<view class="bg-card active-size">
					<text class="bg-card-title">服务</text>免费代写贺卡，下单请备注内容
					<uni-icons type="forward" size="20" color="#c6c6c6"></uni-icons>
				</view>
				<view class="bg-card active-size" @click="buttonClick(1)">
					<text class="bg-card-title">{{active==-1?'选择':'已选'}}</text>{{size}}
					<uni-icons type="forward" size="20" color="#c6c6c6"></uni-icons>
				</view>
			</view>
		</view>
		<view class="detail-img">
			<image v-for="(item,i) in goodsData.detail_img" :key="i" :src="serverUrl+item" mode="widthFix"></image>
		</view>
		<view class="shop-nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>

		<uni-popup ref="popup" type="bottom">
			<add-cart :btnSty="btnSty" :goodsData="goodsData" :active="active" @handleSize='handleActive'
				@addCartOk="addCartOk"></add-cart>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				goodsData: {},
				types: [],
				active: -1, // 选中规格索引
				btnSty: 'buy',
				options: [{
					icon: 'home',
					text: '首页',
				}, {
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#f3eee1',
						color: '#c3a769'
					},
					{
						text: '立即购买',
						backgroundColor: '#c3a769',
						color: '#fff'
					}
				]
			};
		},
		computed: {
			size() {
				let size = '尺寸';
				if (this.goodsData.types && this.active !== -1) {
					size = this.goodsData.types[this.active].size;
				}
				return size

			}
		},
		onLoad(options) {
			let goodsId = options.goodsId;
			this.getGoodsData(goodsId);
		},
		methods: {
			// 根据id获取商品信息
			async getGoodsData(_id) {
				let {
					statusCode,
					data
				} = await uni.$http.reqGoodsDetailByid(_id);
				if (statusCode == 200) {
					this.goodsData = data;
					this.getCartCount();
				}
			},
			// 获取购物车商品数量
			async getCartCount() {
				let {
					statusCode,
					data
				} = await uni.$http.reqCartCount(this.user_id);
				if (statusCode == 200) {
					this.options[2].info = data.count;
				}
			},
			onClick(e) {
				let {
					index
				} = e;
				if (index == 0) {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else if (index == 2) {
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			},
			buttonClick(e) {
				let index = (typeof e) == 'object' ? e.index : e;
				this.btnSty = index == 0 ? 'will-buy' : 'buy';
				// 底部弹出框
				this.$refs.popup.open();

			},
			// 改变选中规格索引
			handleActive(i) {
				this.active = this.active == i ? -1 : i;
			},
			// 商品加购成功
			addCartOk() {
				this.$refs.popup.close();
				uni.showToast({
					title: '已成功添加到购物车',
					icon: "none",
				})
				this.getCartCount();
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		width: 100vw;
		height: 100vw;

		.swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.goods-deatil {
		font-size: 14px;
	}

	.goods-info {
		padding: 0 30rpx;
		background-color: #fff;

		.price-info {
			padding: 40rpx 0;

		}

		.materials {
			padding: 20rpx 0;
			color: #999;
		}
	}

	.goods-type {
		padding: 20rpx 0;

		.active-size {
			position: relative;

			.uni-icons {
				position: absolute;
				top: 30rpx;
				right: 0;
			}
		}
	}

	.bg-card {
		padding: 30rpx;
		background-color: #fff;

		.bg-card-title {
			padding-right: 20rpx;
			color: #999;
		}
	}

	.detail-img {
		image {
			width: 100vw;
		}
	}

	.shop-nav {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>
